<template>
  <div id="waterMark" style="pointer-events: none">
  </div>
</template>

<script>
  export default {
    props: {
      screenWidth: {
        type: Number,
        default () {
          return 0
        }
      },
      userInfo: {}
    },
    data () {
      return {
        showFlow: false,
        timer: false
      }
    },
    methods: {
      watermark (settings) {
        // 默认设置
        console.log(settings)
        let defaultSettings = {
          watermark_txt: this.adminName,
          watermark_txt2: this.posName,
          watermark_txt3: this.roleName,
          watermark_x: 20, // 水印起始位置x轴坐标
          watermark_y: 20, // 水印起始位置Y轴坐标
          watermark_rows: 20, // 水印行数
          watermark_cols: 20, // 水印列数
          watermark_x_space: 100, // 水印x轴间隔
          watermark_y_space: 50, // 水印y轴间隔
          watermark_color: '#000000', // 水印字体颜色
          watermark_alpha: 0.08, // 水印透明度
          watermark_fontsize: '14px', // 水印字体大小
          watermark_font: '微软雅黑', // 水印字体
          watermark_width: 120, // 水印宽度
          watermark_height: 100, // 水印长度
          watermark_angle: 15 // 水印倾斜度数
        }
        // 采用配置项替换默认值，作用类似jquery.extend
        if (arguments.length === 1 && typeof arguments[0] === 'object') {
          let src = arguments[0] || {}
          for (let key in src) {
            if (src[key] && defaultSettings[key] && src[key] === defaultSettings[key]) {
              continue
            } else if (src[key]) {
              defaultSettings[key] = src[key]
            }
          }
        }
        var waterMarkDOM = document.getElementById('waterMark')
        waterMarkDOM.style.position = 'fixed'
        waterMarkDOM.style.width = '0'
        waterMarkDOM.style.height = '0'
        waterMarkDOM.style.top = 0
        waterMarkDOM.style.left = 0
        waterMarkDOM.style.zIndex = '9999'
        var oTemp = document.createDocumentFragment()
        // 获取页面最大宽度
        var pageWidth = Math.max(document.body.scrollWidth, document.body.clientWidth)
        // 获取页面最大长度
        var pageHeight = window.screen.availHeight
        // var pageHeight = 1000

        console.log(pageHeight)
        waterMarkDOM.style.width = pageWidth + 'px'
        waterMarkDOM.style.height = 1000 + 'px'
        console.log(waterMarkDOM)
        // 如果将水印列数设置为0，或水印列数设置过大，超过页面最大宽度，则重新计算水印列数和水印x轴间隔
        if (defaultSettings.watermark_cols === 0 ||
          (parseInt(defaultSettings.watermark_x + defaultSettings.watermark_width * defaultSettings.watermark_cols + defaultSettings.watermark_x_space * (defaultSettings.watermark_cols - 1)) > pageWidth)) {
          defaultSettings.watermark_cols = parseInt((pageWidth - defaultSettings.watermark_x + defaultSettings.watermark_x_space) / (defaultSettings.watermark_width + defaultSettings.watermark_x_space))
          defaultSettings.watermark_x_space = parseInt((pageWidth - defaultSettings.watermark_x - defaultSettings.watermark_width * defaultSettings.watermark_cols) / (defaultSettings.watermark_cols - 1))
        }
        // 如果将水印行数设置为0，或水印行数设置过大，超过页面最大长度，则重新计算水印行数和水印y轴间隔
        if (defaultSettings.watermark_rows === 0 || (parseInt(defaultSettings.watermark_y + defaultSettings.watermark_height * defaultSettings.watermark_rows + defaultSettings.watermark_y_space * (defaultSettings.watermark_rows - 1)) > pageHeight)) {
          defaultSettings.watermark_rows = parseInt((defaultSettings.watermark_y_space + pageHeight - defaultSettings.watermark_y) / (defaultSettings.watermark_height + defaultSettings.watermark_y_space))
          defaultSettings.watermark_y_space = parseInt((pageHeight - defaultSettings.watermark_y - defaultSettings.watermark_height * defaultSettings.watermark_rows) / (defaultSettings.watermark_rows - 1))
        }
        let x
        let y
        for (var i = 0; i < defaultSettings.watermark_rows; i++) {
          y = defaultSettings.watermark_y + (defaultSettings.watermark_y_space + defaultSettings.watermark_height) * i
          for (var j = 0; j < defaultSettings.watermark_cols; j++) {
            x = defaultSettings.watermark_x + (defaultSettings.watermark_width + defaultSettings.watermark_x_space) * j
            var maskDiv = document.createElement('div')
            maskDiv.id = 'maskDiv' + i + j
            // maskDiv.appendChild(document.createTextNode(defaultSettings.watermark_txt))
            let maskP1 = document.createElement('p')
            maskP1.appendChild(document.createTextNode(defaultSettings.watermark_txt2))
            let maskP2 = document.createElement('p')
            maskP2.appendChild(document.createTextNode(defaultSettings.watermark_txt3))
            maskDiv.appendChild(document.createTextNode(defaultSettings.watermark_txt))
            maskDiv.appendChild(maskP1)
            maskDiv.appendChild(maskP2)
            // 设置水印div倾斜显示
            maskDiv.style.webkitTransform = 'rotate(-' + defaultSettings.watermark_angle + 'deg)'
            maskDiv.style.MozTransform = 'rotate(-' + defaultSettings.watermark_angle + 'deg)'
            maskDiv.style.msTransform = 'rotate(-' + defaultSettings.watermark_angle + 'deg)'
            maskDiv.style.OTransform = 'rotate(-' + defaultSettings.watermark_angle + 'deg)'
            maskDiv.style.transform = 'rotate(-' + defaultSettings.watermark_angle + 'deg)'
            maskDiv.style.visibility = ''
            maskDiv.style.position = 'absolute'
            maskDiv.style.left = x + 'px'
            maskDiv.style.top = y + 'px'
            maskDiv.style.overflow = 'hidden'
            maskDiv.style.zIndex = '9999'
            // maskDiv.style.border="solid #eee 1px";
            maskDiv.style.opacity = defaultSettings.watermark_alpha
            maskDiv.style.fontSize = defaultSettings.watermark_fontsize
            maskDiv.style.fontFamily = defaultSettings.watermark_font
            maskDiv.style.color = defaultSettings.watermark_color
            maskDiv.style.textAlign = 'center'
            maskDiv.style.width = defaultSettings.watermark_width + 'px'
            maskDiv.style.height = defaultSettings.watermark_height + 'px'
            maskDiv.style.display = 'block'
            oTemp.appendChild(maskDiv)
          }
        }
        waterMarkDOM.innerHTML = ''
        waterMarkDOM.appendChild(oTemp)
      }
    },
    watch: {
      userInfo (val) {
        console.log(val)
        this.adminName = val.user_name
        // let branchName = _userInfo.branchName
        this.posName = val.branchName
        this.roleName = val.role_name
        this.watermark()
      },
      screenWidth (val) {
        if (!this.timer) {
          this.screenWidth = val
          this.timer = true
          let that = this
          setTimeout(function () {
            that.watermark({
              watermark_txt: this.adminName,
              watermark_txt2: this.posName,
              watermark_txt3: this.roleName
            })
            that.timer = false
          }, 1000)
        }
      }
    }
  }
</script>

